<template>
  <div>
    <!-- 头 -->
    <home-head :title="$route.name" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <swiper :banner="banner" />
      <!-- 卡片走马灯 -->
      <carousel :cate="cate" @getitem="getitem"/>
      <!-- 文字走马 -->
      <text-swiper />
      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="50"
        finished-text="别拉了!到底了晓得不"
        :immediate-check="false"
        @load="onLoad"
      >
        <!-- 推荐商品 -->
        <items :items="items" @details="details" @addcart="addcart"/>
      </van-list>
    </van-pull-refresh>
    <!-- Tabbar标签 -->
    <tabbar />
  </div>
</template>

<script>
import HomeHead from './component/HomeHead.vue'
import Tabbar from '../../components/Tabbar.vue'
import Carousel from './component/Carousel'
import Swiper from './component/Swiper.vue'
import TextSwiper from './component/TextSwiper.vue'
import Items from './component/Items'
import { getBanner, getCate, goodsItem } from '../../api/index'
import { gettoken } from '_utils'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      banner: [],
      cate: [],
      items: [],
      page: 1,
      pageSize: 5,
      loading: false, // 上拉加载时自动变为true，此时不会再触发加载
      finished: false, // 上拉触底
      isLoading: false // 是否处于刷新中
    }
  },
  created () {
    this.getCate()
    this.getBanner()
    this.getItem()
  },
  methods: {
    ...mapActions('cart', ['ADD_CART']),
    // 加购
    addcart (id) {
      this.ADD_CART({
        goodsId: id,
        number: 1,
        token: gettoken()
      })
    },
    // 分类页
    getitem (id) {
      this.$router.push({
        path: '/itemlists',
        query: {
          id
        }
      })
    },
    // 详情页
    details (id) {
      this.$router.push({
        path: '/details',
        query: {
          id
        }
      })
    },
    // 下拉刷新
    onRefresh () {
      this.page = 1
      this.items = []
      this.finished = false
      this.getItem()
    },
    // 上拉加载
    onLoad () {
      this.page++
      this.getItem()
    },
    // 主页推荐商品
    getItem () {
      goodsItem({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        this.loading = false
        // console.log(res)
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data.result]
        }
        if (res.data.code === 700) {
          this.finished = true
        }
      })
    },
    // 主页主打分类
    getCate () {
      getCate().then((res) => {
        if (res.data.code === 0) {
          this.cate = res.data.data
        }
        // console.log(this.cate)
      })
    },
    // 轮播初始数据
    getBanner () {
      getBanner().then((res) => {
        if (res.data.code === 0) {
          this.banner = res.data.data
        }
      })
    }
  },
  components: { Carousel, Swiper, TextSwiper, Tabbar, Items, HomeHead }
}
</script>

<style lang="scss" scoped></style>
